import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "./store";
import { addTodo, delTodo } from "./store/actions/todos";


function App() {
  const todos = useSelector((state: RootState) => state.todos)
  const dispatch = useDispatch()

  const [name, setName] = useState('')
  const add = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.code === "Enter") {
      dispatch(addTodo(name))
      setName('')
    }
  }
  return (
    <ul>
      <li>
        <input type="text" value={name} onKeyUp={add} onChange={e => setName(e.target.value)} />
      </li>
      {
        todos.map(item => {
          return (
            <li key={item.id}>{item.name}<button onClick={() => { dispatch(delTodo(item.id)) }}>X</button></li>
          )

        })
      }
    </ul>

  )

}

export default App;
